<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 个人中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>个人信息管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="empForm" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" prop="repassword">
                        <el-input type="password" v-model="form.repassword"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="phone">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="form.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input-number v-model="form.age" :step="5" />
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-input :readonly="true" v-model="form.department.name"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-input :readonly="true" v-model="form.role.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Personal',
    data() {
        return {
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                repassword: [
                    {  trigger: "blur", validator: (rule,value,callback)=>{
                            if (value!==this.form.password){
                                return callback(new Error("与之前密码不一致"));
                            }
                        }
                    },

                ],
                email: [
                    { required: true, message: "请输入邮箱", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "请输入手机号", trigger: "blur" }
                ],
                age: [
                    { required: true, message: "请输入年龄", trigger: "blur" }
                ]
            },
            form: {
                role:{},
                department:{}
            }
        };
    },
    methods: {
        onSubmit() {
            this.$refs.empForm.validate(valid => {
                if (valid) {
                    this.$axios({
                        method: 'post',
                        url: '/employee',
                        data: this.form
                    }).then(res=>{
                        if (res && res.data.code==200){
                            this.$message.success('更新成功！');
                        }else{
                            this.$message.error('更新失败！');
                        }
                    }).catch(error=>{
                        this.$message.error(error.message);
                    })
                }
            });

        },
        getLoginUser(){
           const loginUserStr = localStorage.getItem("loginUser");
           if (loginUserStr){
             const id = JSON.parse(loginUserStr).id;
             this.$axios({
                 method: 'get',
                 url: '/employee/'+id
             }).then(res=>{
                 if (res && res.data.code==200){
                     this.form = res.data.data;
                 }
             }).catch(error=>{
                 this.$message.error(error.message);
             })
           }
        }
    },
    mounted() {
        this.getLoginUser();
    }
};
</script>